<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>千歆</title>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="css/desktop.css"/>
	</head>
	<body>
		<div id="systematic">
			<div id="desktop">
				<div id="backdrop"></div>
				<div id="content">
					<div class="shortcuts">
						<div class="shortcut">
							<div class="block">
								<div class="iconfont icon-jiaoxue shortcut-icon"></div>
								<div class="title" data-href="jiaoxue">教学</div>
							</div>
						</div>
						<div class="shortcut">
							<div class="block">
								<div class="iconfont icon-jiaoshiguanli shortcut-icon"></div>
								<div class="title" data-href="jiaoshiguanli">教师</div>
							</div>
						</div>
						<div class="shortcut">
							<div class="block">
								<div class="iconfont icon-xiangmu shortcut-icon"></div>
								<div class="title" data-href="xiangmu">项目</div>
							</div>
						</div>
						<div class="shortcut">
							<div class="block">
								<div class="iconfont icon-xiaoxi shortcut-icon"></div>
								<div class="title" data-href="xiaoxi">消息</div>
							</div>
						</div>
						<div class="shortcut">
							<div class="block">
								<div class="iconfont icon-renshiguanli2 shortcut-icon"></div>
								<div class="title" data-href="renshiguanli2">人事</div>
							</div>
						</div>
						<div class="shortcut">
							<div class="block">
								<div class="iconfont icon-zhuti1 shortcut-icon"></div>
								<div class="title" data-href="theme.html">主题</div>
							</div>
						</div>
						<div class="shortcut">
							<div class="block">
								<div class="iconfont icon-jianliguanli shortcut-icon"></div>
								<div class="title" data-href="jianliguanli">简历</div>
							</div>
						</div>
						<div class="shortcut">
							<div class="block">
								<div class="iconfont icon-tongji shortcut-icon"></div>
								<div class="title" data-href="tongji">数据统计</div>
							</div>
						</div>
						<div class="shortcut">
							<div class="block">
								<div class="iconfont icon-xuesheng shortcut-icon"></div>
								<div class="title" data-href="xuesheng">学生</div>
							</div>
						</div>
						<div class="shortcut">
							<div class="block">
								<div class="iconfont icon-shezhi shortcut-icon"></div>
								<div class="title" data-href="system.html">系统设置</div>
							</div>
						</div>
						<div class="shortcut">
							<div class="block">
								<div class="iconfont icon-qudao1 shortcut-icon"></div>
								<div class="title" data-href="qudao1">渠道</div>
							</div>
						</div>
					</div>
				</div>
				<div id="taskbar">
					<div id="start">
						<div class="start" data-status="close">开始</div>
						<div class="start-menu">
							<div class="menu-left"><i class="iconfont icon-084tuichu exit"></i></div>
							<div class="menu-right">
								<ul>
									<li><i class="iconfont icon-nv1"></i> <span>个人中心</span></li>
									<li><i class="iconfont icon-shezhi"></i> <span>系统设置</span></li>
									<li><i class="iconfont icon-suo"></i> <span>锁屏</span></li>
									<li><i class="iconfont icon-zhuti"></i> <span>个性化主题</span></li>
									<li><i class="iconfont icon-xiaoxi"></i> <span>消息中心</span></li>
								</ul>
							</div>
						</div>
					</div>
					<div class="mission">
						<div class="task-right-menu">
							<div class="close"><i class="iconfont icon-guanbi close"></i> 关闭窗口</div>
						</div>
						<div class="tasks">
							<!-- <div class="task">系统设置</div> -->
						</div>
					</div>
					<div class="taskbar-right">
						<div class="taskbar-right-message"><i class="iconfont icon-xiaoxi" title="退出"></i></div>
						<div class="taskbar-right-time">
							<p class="time">00:00:00</p>
							<p class="date">00-00-00</p>
						</div>
						<div class="taskbar-right-desktop"></div>
					</div>
				</div>
			</div>
			<div id="unknown">
				<!-- 右键 -->
				<div class="right-menu">
					<div><span><i class="iconfont icon-zhuomian"></i></span><b>显示桌面</b></div>
					<div><span><i class="iconfont icon-zhuti"></i></span><b>个性化</b></div>
					<div class="lockscreen"><span><i class="iconfont icon-suo1"></i></span><b>屏幕锁屏</b></div>
					<div onclick="location.reload();"><span><i class="iconfont icon-shuaxin"></i></span><b>刷新</b></div>
					<div><span><i class="iconfont icon-shezhi"></i></span><b>系统设置</b></div>
				</div>
				<!-- 弹出层 -->
				<div class="popup-layer">
					<div id="layer">
						<!-- <div class="layer">
							<div class="popup-layer-move"></div>
							<div class="title">标题</div>
							<div class="buttons"><i class="iconfont icon-zuixiaohua small"></i><i class="iconfont icon-chuangkou-fangda size"></i><i class="iconfont icon-guanbi close"></i></div>
							<div class="main"><iframe id="layerContent" src="/" width="" height="" allowtransparency="true"></iframe></div>
						</div> -->
					</div>
				</div>
				<!-- 消息 -->
				<div class="right-message">
					<div id="message">
						<div class="message">
							<div class="title">最新通知</div>
							<ul>
								<li>
									<h4>你的最新通知信息！</h4>
									<p>欢迎你使用公司内容OA系统！</p>
								</li>
								<li>
									<h4>你的最新通知信息！</h4>
									<p>欢迎你使用公司内容OA系统！</p>
								</li>
								<li>
									<h4>你的最新通知信息！</h4>
									<p>欢迎你使用公司内容OA系统！</p>
								</li>
								<li>
									<h4>你的最新通知信息！</h4>
									<p>欢迎你使用公司内容OA系统！</p>
								</li>
								<li>
									<h4>你的最新通知信息！</h4>
									<p>欢迎你使用公司内容OA系统！</p>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<!-- 锁屏 -->
				<div class="full-lock">
					<div id="lock">
						<div class="lock" style="background: url(images/iu2.jpg) no-repeat center center/cover;">
							<div class="user">
								<div class="image"><img src="images/img.jpg" width="150" /></div>
								<div class="username">Qx-Admin</div>
								<div class="userpass"><input type="password"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="js/popup-layer.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/taskbar.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/start.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			start.init();
			/**
			 * 任务栏任务右键
			 */
			/*
			var taskbar = {
				init: function(){
					var tasks = document.querySelectorAll('#taskbar .mission .tasks .task'),
						taskLen = tasks.length;
					var that = this;
					for(var i=0; i<taskLen; i++){
						tasks[i].oncontextmenu = function(){
							that.openRightMenu();
						};
					}
				},
				openRightMenu: function(){
					var taskRightMenu = document.querySelector('#taskbar .mission .task-right-menu');
					taskRightMenu.style.display = 'block';
				},
				closeRightMenu: function(){
					var taskRightMenu = document.querySelector('#taskbar .mission .task-right-menu');
					taskRightMenu.style.display = 'none';
				},
			};
			taskbar.init();
			*/
			
			/**
			 * 快捷键Ctrl + Alt + L
			 */
			document.onkeydown = function(e){
				if(e.ctrlKey && e.altKey && e.keyCode == 76){
					console.log(e);
				}
			};
			
			/**
			 * 锁屏
			 */
			/*
			var lockLayer = document.querySelector('.full-lock #lock');
			lockLayer.oncontextmenu = function(e){
				e.preventDefault();
			};
			if(localStorage.lockscreen == 'true'){
				lockLayer.style.display = 'block';
			}else{
				lockLayer.style.display = 'none';
			}
			var lockScreenBtn = document.querySelector('#unknown .right-menu .lockscreen');
			lockScreenBtn.onclick = function(){
				var lockscreen = localStorage.lockscreen;
				localStorage.lockscreen = true;
				lockLayer.style.display = 'block';
			};
			*/
			/**
			 * 右边消息中心
			 */
			var msg = document.querySelector('#taskbar .taskbar-right .taskbar-right-message');
			document.querySelector('#unknown .right-message #message').oncontextmenu = function(e){
				e.preventDefault();
			}
			msg.onclick = function(){
				var messageLayer = document.querySelector('#unknown .right-message #message');
				var messageLeft = messageLayer.style.left;
				if(messageLeft == '' || messageLeft == '0px'){
					messageLayer.style.left = '-320px';
					this.setAttribute('class', 'taskbar-right-message spread');
				}else{
					messageLayer.style.left = 0;
					this.setAttribute('class', 'taskbar-right-message');
				}
			};
			/**
			 * 右下角时钟
			 */
			var clock = document.querySelector('#taskbar .taskbar-right .taskbar-right-time');
			var clockTimer = null;
			var playTime = function(){
				var date = new Date();
				var month = date.getMonth() < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1);
				var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
				var dateTxt = date.getFullYear() + '-' + month + '-' + day;
				var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
				var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
				var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				var timeTxt = hours + ':' + minutes + ':' + seconds;
				clock.querySelector('p.date').innerText = dateTxt;
				clock.querySelector('p.time').innerText = timeTxt;
			};
			playTime();
			clockTimer = window.setInterval(playTime, 1000);
			
			/**
			 * 窗口大小
			 */
			/*
			var windowSize = function(obj, mouseDown){
				var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
				var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
				var width = obj.clientWidth,
					height = obj.clientHeight;
				console.log(width, height, w, h);
				if(width < w && height < h){
					obj.style.width = '100%';
					obj.style.height = (h - 40) + 'px';
					obj.style.top = 0;
					obj.style.left = 0;
					obj.querySelector('.size').setAttribute('class', 'iconfont icon-wind-zoom-out size');
				}else{
					obj.style.width = 1000 + 'px';
					obj.style.height = 650 + 'px';
					obj.style.top = (h - 650) / 2 + 'px';
					obj.style.left = (w - 1000) / 2 + 'px';
					obj.querySelector('.size').setAttribute('class', 'iconfont icon-chuangkou-fangda size');
				}
			};
			*/
			/**
			 * 窗口拖动
			 */
			/*
			var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
			var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
			var popupLayer = document.querySelectorAll('#unknown .popup-layer #layer .layer');
			var iframeLayer = document.querySelector('#unknown .popup-layer #layer .layer .main iframe').contentWindow.document;
			iframeLayer.oncontextmenu = function(e){
				e.preventDefault();
			};
			for(var i=0,length=popupLayer.length; i<length; i++){
				popupLayer[i].oncontextmenu = function(e){
					e.preventDefault();
				}
				popupLayer[i].style.top = (h - popupLayer[i].clientHeight) / 2 + 'px';
				popupLayer[i].style.left = (w - popupLayer[i].clientWidth) / 2 + 'px';
				var mouseDown = function(ev){
					ev.stopPropagation();
					var timer = null;
					clearTimeout(timer);
					var that = this;
					var layerMove = that.parentNode.querySelector('.popup-layer-move');
					layerMove.style.display = 'block';
					var parent = that.parentNode;
					parent.style.zIndex = 20;
					var oevent = ev || event;
					var distanceX = oevent.clientX - parent.offsetLeft;
					var distanceY = oevent.clientY - parent.offsetTop;
					document.onmousemove = function(ev){
						var oevent = ev || event;
						parent.style.left = oevent.clientX - distanceX + 'px';
						parent.style.top = oevent.clientY - distanceY + 'px'; 
					};
					var times = null;
					parent.onmouseup = function(){
						document.onmousemove = null;
						document.onmouseup = null;
						layerMove.style.display = 'none';
					};
				}
				popupLayer[i].querySelector('.title').onmousedown = mouseDown;
				var timeer = null;
				popupLayer[i].querySelector('.buttons .small').onclick = function(e){
					this.parentNode.parentNode.style.display = 'none';
				}
				popupLayer[i].querySelector('.buttons .size').onclick = function(e){
					windowSize(this.parentNode.parentNode, mouseDown);
					var width = this.clientWidth,
						height = this.clientHeight;
					if(w > width && h > height){
						this.parentNode.parentNode.querySelector('.title').onmousedown = mouseDown;
					}else{
						this.parentNode.parentNode.querySelector('.title').onmousedown = null;
					}
				}
				popupLayer[i].querySelector('.buttons .close').onclick = function(e){
					this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
				}
				popupLayer[i].ondblclick = function(ev){
					ev.stopPropagation();
					windowSize(this, mouseDown);
					var width = this.clientWidth,
						height = this.clientHeight;
					if(w > width && h > height){
						this.querySelector('.title').onmousedown = mouseDown;
					}else{
						this.querySelector('.title').onmousedown = null;
					}
				};
				
			}
			*/
			/**
			 * 右键菜单
			 */
			document.querySelector('#content').oncontextmenu = function(e){
				//取消默认的浏览器自带右键 很重要！！
				e.preventDefault();
				var menu = document.querySelector('#unknown .right-menu');
				menu.oncontextmenu = function(e){
					e.preventDefault();
				};
				menu.style.left = e.clientX+'px';
				menu.style.top = e.clientY+'px';
				menu.style.height = 'auto';
				menu.onclick = function(e){
					e.stopPropagation();
				}
			}
			document.querySelector('#taskbar').oncontextmenu = function(e){
				e.preventDefault();
			}
			//关闭右键菜单
			document.querySelector('#content').onclick=function(e){

				var menu = document.querySelector('#unknown .right-menu');
				//用户触发click事件就可以关闭了，因为绑定在window上，按事件冒泡处理，不会影响菜单的功能
			　　	menu.style.height = 0;
				var shortcuts = document.querySelectorAll('#content .shortcuts .shortcut');
				for(var j=0,len=shortcuts.length; j<len; j++){
					shortcuts[j].querySelector('.block').setAttribute('class', 'block');
				}
				var messageLayer = document.querySelector('#unknown .right-message #message');
				messageLayer.style.left = 0;
				document.querySelector('#taskbar .taskbar-right .taskbar-right-message').setAttribute('class', 'taskbar-right-message');
				taskbar.menu(0, false);
				start.init().close();
			}
			/**
			 * 桌面图标项目
			 */
			window.onload = window.onresize = function(){
				var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
				var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
				var shortcuts = document.querySelectorAll('#content .shortcuts .shortcut');
				var count = 0, cols = 0;
				for(var i=0,len=shortcuts.length; i<len; i++){
					var timer = null;
					shortcuts[i].setAttribute('data-index', i);
					shortcuts[i].onclick = function(e){
						//e.stopPropagation();
						var that = this;
						clearTimeout(timer);
						//初始化一个延时
						timer = setTimeout(function(){
							for(var j=0; j<len; j++){
								shortcuts[j].querySelector('.block').setAttribute('class', 'block');
							}
							that.querySelector('.block').setAttribute('class', 'block click');
						},252);
					};
					//双击事件会先触发两次单击事件，然后再执行双击事件，使用清除定时器来达到双击只执行双击事件的目的
					shortcuts[i].ondblclick = function(e){
						//e.stopPropagation();
						var that = this;
						clearTimeout(timer);
						/*
						for(var j=0; j<len; j++){
							shortcuts[j].querySelector('.block').setAttribute('class', 'block');
						}
						that.querySelector('.block').setAttribute('class', 'block click');
						*/
						var blockTitle = this.querySelector('.block div:last-child');
						popup.zIndex();
						popup.open({
							title: blockTitle.innerText, 
							href: blockTitle.getAttribute('data-href'), 
							index: that.getAttribute('data-index'),
							close: function(index){
								taskbar.remove(index);
							},
							level: function(index){
								taskbar.level(index);
							}
						});
						taskbar.init({
							title: blockTitle.innerText,
							index: that.getAttribute('data-index'),
							close: function(index){
								popup.close(index);
							},
							level: function(index){
								popup.level(index);
							},
							small: function(index){
								popup.small(index, false);
							}
						});
						//console.log("双击");
					};
					
					var shortcutTop = 0,
						shortcutLeft = 0;
					shortcutTop = count * shortcuts[i].clientHeight;
					
					if(shortcutTop >= (h - shortcuts[i].clientHeight - 32)){
						cols++;
						count = 0;
						shortcutTop = count * shortcuts[i].clientHeight;
						shortcutLeft = cols * shortcuts[i].clientHeight;
					}
					shortcutLeft = cols * shortcuts[i].clientHeight;
					shortcuts[i].style.top = shortcutTop + 'px';
					shortcuts[i].style.left = shortcutLeft + 'px';
					count++;
				}
			}
			
		</script>
	</body>
</html>
